diff --git a/landing/assets/farcaster-logo.react.js b/landing/assets/farcaster-logo.react.js new file mode 100644 index 000000000..186537ce4 --- /dev/null +++ b/landing/assets/farcaster-logo.react.js @@ -0,0 +1,38 @@ +// @flow + +import * as React from 'react'; + +type Props = { + +size?: number, + +className?: string, +}; + +function FarcasterLogo(props: Props): React.Node { + const { size, ...rest } = props; + + return ( + + + + + + ); +} + +export default FarcasterLogo; diff --git a/landing/team-profile.css b/landing/team-profile.css index b8ce31be8..e5341ac14 100644 --- a/landing/team-profile.css +++ b/landing/team-profile.css @@ -1,43 +1,49 @@ .profile { display: flex; flex-direction: column; align-items: center; min-width: 175px; } .profile img { border-radius: 8px; max-width: 125px; max-height: 125px; margin-bottom: 8px; } .profile p { text-align: center; } .profile small { color: var(--black-60); text-align: center; } .profile span svg { color: var(--black-60); } .profile span svg:hover { color: var(--white-100); } .profile span { text-align: center; } .profile span > a + a { padding-left: 8px; } .profile span > a { color: var(--white-100); font-size: 20px; } + +.farcaster { + display: inline-block; + position: relative; + top: 5px; +} diff --git a/landing/team-profile.react.js b/landing/team-profile.react.js index 1cc3499d3..09314e1f4 100644 --- a/landing/team-profile.react.js +++ b/landing/team-profile.react.js @@ -1,64 +1,81 @@ // @flow import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import * as React from 'react'; +import FarcasterLogo from './assets/farcaster-logo.react.js'; import css from './team-profile.css'; import typography from './typography.css'; type Props = { +name: string, +role: string, +imageURL: string, +githubHandle?: string, +twitterHandle?: string, + +farcasterHandle?: string, }; -const iconProps = { +const fontAwesomeIconProps = { size: 'm', }; function TeamProfile(props: Props): React.Node { - const { name, role, imageURL, githubHandle, twitterHandle } = props; + const { name, role, imageURL, githubHandle, twitterHandle, farcasterHandle } = + props; let twitterLink; if (twitterHandle) { twitterLink = ( - + ); } let githubLink; if (githubHandle) { githubLink = ( - + + + ); + } + + let farcasterLink; + if (farcasterHandle) { + farcasterLink = ( + + ); } return (
- {`portrait + {`portrait

{name}

{role} {githubLink} + {farcasterLink} {twitterLink}
); } export default TeamProfile; diff --git a/landing/team.react.js b/landing/team.react.js index d0d73391a..8dcd1c13c 100644 --- a/landing/team.react.js +++ b/landing/team.react.js @@ -1,106 +1,109 @@ // @flow import classNames from 'classnames'; import * as React from 'react'; import { assetsCacheURLPrefix } from './asset-meta-data.js'; import Button from './button.react.js'; import TeamProfile from './team-profile.react.js'; import css from './team.css'; import typography from './typography.css'; function Team(): React.Node { const onRolesClick = React.useCallback(() => { window.open( 'https://www.notion.so/commapp/Comm-is-hiring-db097b0d63eb4695b32f8988c8e640fd', '_blank', ); }, []); const headerClassName = classNames([typography.heading1, css.header]); const subheaderClassName = classNames([typography.subheading2, css.team]); return (

Team

Comm is the keyserver company. Come join us and help build the future of the decentralized web!

Team at Software Mansion

); } export default Team;